<template>
  <back-dialog-base
    @close="close"
    @onCommit="handleSubmit"
    :title="title"
    :visible="visibleDialog"
    width="446px"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item label="巡检类型：" prop="patrolName">
              <el-select
                v-model="form.patrolName"
                clearable
                placeholder="--请选择--"
              >
                <el-option
                  v-for="item in CheckingTypeDropList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="所属管廊：" prop="pipeName">
              <el-select
                v-model="form.pipeName"
                clearable
                placeholder="--请选择--"
              >
                <el-option
                  v-for="item in pipeNameDrop"
                  :key="item.id"
                  :label="item.pipeName"
                  :value="item.pipeName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="所属仓室：" prop="storehouseName">
              <el-select
                v-model="form.storehouseName"
                clearable
                placeholder="--请选择--"
              >
                <el-option
                  @click="handleChangewarehouse(item)"
                  v-for="item in warehouseIddrop"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="防火分区：" prop="subregionName">
              <el-select
                v-model="form.subregionName"
                clearable
                placeholder="--请选择--"
              >
                <el-option
                  v-for="item in subregionIdrop"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :value-key="item.name"
                  @click="handleChange(item)"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="巡检点名称：" prop="name">
              <el-input v-model="form.name" placeholder="请输入…"></el-input>
            </el-form-item>
            <el-form-item label="巡检点位置：" prop="location">
              <el-input
                v-model="form.location"
                placeholder="请输入…"
              ></el-input>
            </el-form-item>
            <el-form-item label="巡检点类型：" prop="patrolPointType">
              <el-input
                v-model="form.patrolPointType"
                placeholder="请输入…"
              ></el-input>
            </el-form-item>
            <el-form-item label="作业指导：" prop="workGuide">
              <el-input
                v-model="form.workGuide"
                placeholder="请输入…"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import {
  reactive,
  defineProps,
  ref,
  defineEmits,
  watch,
  onMounted,
  defineExpose,
  nextTick
} from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import {
  commonPipeNameDrop,
  commonwarehouseIdDrop,
  commonsubregionIdDrop
} from '@/api/back'
import {
  InspectionPointConfigurationSave,
  CheckingTypeDrop
} from '@/api/CheckingPoint'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})

const pipeNameDrop = ref([]) //所属管廊下拉列表
const subregionIdrop = ref([]) //防火分区下拉列表
const warehouseIddrop = ref([]) //所属仓室下拉列表
const formRef = ref(null)
const CheckingTypeDropList = ref([]) //巡检类型下拉列表
const emits = defineEmits(['onReload'])
const form = reactive({
  pipeName: '', //管廊名称
  name: '', //巡检点配置位置
  patrolPointType: '', //巡检点类型
  patrolName: '', //巡检类型
  workGuide: '', //作业指导
  location: '', //巡检点位置
  storehouseName: '', //所属仓室
  subregionName: '', //所属分区
  storehouseId: '', //所属仓id
  subregionId: '' //所属分区id
})
//获取所属管廊下拉列表
const GetpipeNameDrop = () => {
  commonPipeNameDrop().then((res) => {
    let data = res
    pipeNameDrop.value = [...data]
  })
} //获取所属仓室下拉列表
const GetwarehouseIddrop = () => {
  commonwarehouseIdDrop().then((res) => {
    let data = res
    warehouseIddrop.value = [...data]
  })
}
//获取防火分区下拉列表
const GetpisubregionIdDrop = () => {
  commonsubregionIdDrop().then((res) => {
    let data = res

    subregionIdrop.value = [...data]
  })
}
const close = () => {
  formRef.value.resetFields()
}
onMounted(() => {
  GetpipeNameDrop()
  GetwarehouseIddrop()
  GetpisubregionIdDrop()
  GetPmiPointTypeDrop()
})
const handleChange = (options) => {
  form.subregionName = options.name
  form.subregionId = options.id
}
const handleChangewarehouse = (options) => {
  form.storehouseName = options.name
  form.storehouseId = options.id
}

//获取巡检类型下拉列表
const GetPmiPointTypeDrop = () => {
  CheckingTypeDrop().then((res) => {
    let data = res

    CheckingTypeDropList.value = [...data]
  })
}

// const clearForm = () => {
//   if (!formRef.value) return
//   formRef.value.resetFields()
//   form.value = {
//     beginTime: '', //开始时间
//     director: '', //作业负责人
//     endTime: '', //结束时间
//     id: '', //主键ID
//     isDeleted: '', //删除标志位
//     pipeId: '', //所属管廊ID
//     pipeName: '', //管廊名称
//     position: '', //所在位置
//     remark: '' //施工描述
//   }
// }
const save = async (data) => {
  const res = await InspectionPointConfigurationSave(data)
  if (res && res.id) {
    if (props.title === '新建巡检点') {
      message({ type: 'success', message: '新建巡检点成功!' })
    }
    // clearForm()
    emits('onReload')
  }
}
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save(Object.assign(props.rowData, form))
    } else {
      return false
    }
  })
}
const cleara = () => {
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
defineExpose({ cleara })
const rules = reactive({
  pipeName: [
    {
      required: true,
      message: '所属管廊不能为空',
      trigger: 'change'
    }
  ],
  name: [
    {
      required: true,
      message: '巡检点名称不能为空',
      trigger: 'blur'
    }
  ],
  patrolPointType: [
    {
      required: true,
      message: '巡检点类型不能为空',
      trigger: 'blur'
    }
  ],
  patrolName: [
    {
      required: true,
      message: '巡检类型不能为空',
      trigger: 'change'
    }
  ],
  workGuide: [
    {
      required: true,
      message: '作业指导不能为空',
      trigger: 'blur'
    }
  ],

  location: [
    {
      required: true,
      message: '巡检点位置不能为空',
      trigger: 'blur'
    }
  ],

  storehouseName: [
    {
      required: true,
      message: '所属仓室不能为空',
      trigger: 'change'
    }
  ],
  subregionName: [
    {
      required: true,
      message: '防火分区不能为空',
      trigger: 'change'
    }
  ]
})
</script>
<style lang="scss" scoped>
.content-warp {
  :deep(.el-input__inner) {
    width: 212px;
  }
  width: 100%;
  height: 100%;
  display: flex;
  .left-form {
    flex: 4;
  }
}
</style>
